<template>
    <Menu :active-name="activeName" @on-select="selectMenu" >
        <MenuGroup title="个人中心">
            <MenuItem name="userInfo">
                <Icon type="ios-folder-open" />
                我的资料
            </MenuItem>
            <MenuItem name="userGoods">
                <Icon type="md-photos" />
                我发布的商品
            </MenuItem>
            <MenuItem name="userSellGoods">
                <Icon type="md-photos" />
                我卖出的商品
            </MenuItem>
            <MenuItem name="userDownGoods">
                <Icon type="md-photos" />
                我下架的商品
            </MenuItem>
            <MenuItem name="userWantedGoods">
                <Icon type="ios-paper" />
                我发布的求购信息
            </MenuItem>
        </MenuGroup>
    </Menu>
</template>

<script>
    export default {
        name: "UserMenu",
        data() {
            return {
                activeName: '', // 激活的左边菜单
            }
        },
        created() {
            this.activeName = this.$route.path;
        },
        activated() {
            this.activeName = this.$route.path;
        },
        methods: {
            selectMenu(name) {
                if (name != this.activeName) {
                    this.activeName = name;
                    this.$router.push(name)
                }
            }
        }
    }
</script>

<style scoped>
    i {
        font-size: 18px;
    }
</style>